<template>
<div>
  <div style="padding: 20px">
<!--    :before-upload="handleBeforeUpload"-->
<!--    action="//qstb.mzj.shenyang.gov.cn/api/uc/grid/ossUploadService/createIoToFile"-->
    <Upload
      :disabled="uploadLoading"
      :before-upload="handleBeforeUpload"
      accept=".xls, .xlsx"
      action=""
      type="drag">
      <div class="upload-tip">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>请导入.xls或.xlsx格式的Excel</p>
      </div>
    </Upload>
    <div class="opt-area-02">
      <div style="font-size: 18px">
        注：上传excel中，表头需要与下面表头顺序一致，不可多或少列，否则数据无法解析（无效数据），无法在装户图中显示
      </div>
      <span>序号｜</span>
      <span>市｜</span>
      <span>区｜</span>
      <span>街道｜</span>
      <span>社区｜</span>
      <span>采集地点｜</span>
      <span>采集管号｜</span>
      <span>身份证号｜</span>
      <span>姓名｜</span>
      <span>性别｜</span>
      <span>电话｜</span>
      <span>住址｜</span>
      <span>年龄｜</span>
      <span>类别｜</span>
      <span>备注｜</span>
      <span>采集时间｜</span>
      <span>采集人姓名｜</span>
      <span>采集人电话｜</span>
      <span>标本类型｜</span>
      <span>接收实验室｜</span>
      <span>检测时间｜</span>
      <span>人员关系｜</span>
      <span>箱号｜</span>
    </div>
    <Table border :columns="tableColumns" :data="tableData">
      <template slot-scope="{ row, index }" slot="excel_type">
        <span v-show="row.excel_type === '0'">等待处理</span>
        <span v-show="row.excel_type === '1'">处理中</span>
        <span v-show="row.excel_type === '2'">处理成功</span>
        <span v-show="row.excel_type === '99'">处理失败（99）</span>
        <span v-show="row.excel_type === '991'">处理失败（991）</span>
        <span v-show="row.excel_type === '992'">处理失败（992）</span>
        <span v-show="row.excel_type === '993'">处理失败,尝试重新处理（993）</span>
        <span v-show="row.excel_type === '994'">处理失败,请重新上传（994）</span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button>
        <Button type="error" size="small" @click="remove(index)">Delete</Button>
      </template>
    </Table>
  </div>
</div>
</template>

<script>
import SparkMD5 from 'spark-md5'
import { createIoToFile, findTableList, getExcelInfo, saveExcelInfo } from '../../api/eventlist'
export default {
  name: 'index',
  data () {
    return {
      uploadLoading: false,
      upPicData: {
        fileName: '',
        filePath: '',
        file: '',
        md5: ''
      },
      tableColumns: [
        {
          title: '文件唯一标识',
          key: 'excel_md5',
          align: 'center',
          width: 100,
          fixed: 'left'
        },
        {
          title: '文件处理状态',
          slot: 'excel_type',
          align: 'center',
          width: 100,
          fixed: 'left'
        },
        {
          title: '文件路径',
          key: 'excel_url',
          width: 800,
          align: 'center'
        },
        {
          title: '文件名称',
          key: 'excel_name',
          minWidth: 500,
          align: 'center'
        },
        {
          title: '文件上传时间',
          key: 'excel_create_time',
          align: 'center',
          fixed: 'right',
          width: 100
        },
        {
          title: '任务开始时间',
          key: 'excel_begin_time',
          align: 'center',
          fixed: 'right',
          width: 100
        },
        {
          title: '任务结束时间',
          key: 'excel_end_time',
          align: 'center',
          fixed: 'right',
          width: 100
        }
      ],
      tableData: []
    }
  },
  methods: {
    handleBeforeUpload (file) {
      this.uploadLoading = true
      const fileExt = file.name.split('.').pop().toLocaleLowerCase()
      if (fileExt === 'xlsx' || fileExt === 'xls') {
        this.upPicData.fileName = file.name.replace('(', '').replace(')', '').replace(/\s/g, '')
        this.upPicData.filePath = 'excel'
        this.upPicData.file = file
        this.handlePrepareUpload(file, (callback) => {
          this.upPicData.md5 = callback
          this.getExcelInfo(this.upPicData)
        })
      } else {
        this.$Notice.warning({
          title: '文件类型错误',
          desc: '文件：' + file.name + '不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。'
        })
      }
      this.uploadLoading = false
      return false
    },
    getExcelInfo (e) {
      let data = {
        excel_name: e.fileName,
        excel_md5: e.md5
      }
      getExcelInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.uploadExcel(this.upPicData)
        } else {
          this.$Notice.error({ title: '创建任务失败！', desc: ret.data.errmsg })
        }
      })
    },
    uploadExcel (e) {
      this.$Message.loading({
        content: '文件上传中，请不要关闭页面！等待上传（无法同时上传多个文件！）',
        duration: 0
      })
      this.uploadLoading = true
      const formdata = new FormData()
      formdata.append('file', e.file)
      formdata.append('fileName', e.fileName)
      formdata.append('filePath', e.filePath)
      createIoToFile(formdata).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.destroy()
          e.url = ret.data.data.url
          // this.saveExcelInfo(e)
        } else {
          this.$Notice.error({ title: '上传失败！', desc: ret.data.errmsg })
        }
      })
    },
    saveExcelInfo (e) {
      let data = {
        excel_name: e.fileName,
        excel_md5: e.md5,
        excel_url: e.url
      }
      saveExcelInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '上传成功！', desc: ret.data.errmsg })
          this.findTableList()
        } else {
          this.$Notice.error({ title: '创建任务失败！', desc: ret.data.errmsg })
        }
      })
    },
    handlePrepareUpload (e, callback) {
      try {
        var fileReader = new FileReader()
        var dataFile = e
        var spark = new SparkMD5() // 创建md5对象（基于SparkMD5）
        if (dataFile.size > 1024 * 1024 * 10) {
          var data1 = dataFile.slice(0, 1024 * 1024 * 10) // 将文件进行分块 file.slice(start,length)
          fileReader.readAsBinaryString(data1) // 将文件读取为二进制码
        } else {
          fileReader.readAsBinaryString(dataFile)
        }
        fileReader.onload = function (e) {
          spark.appendBinary(e.target.result)
          var md5 = spark.end()
          callback(md5)
        }
      } catch (e) {
        this.$Notice.error({
          title: '上传失败！',
          desc: '解析文件MD5失败！'
        })
      }
    },
    findTableList () {
      findTableList().then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    init () {
      this.findTableList()
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
.opt-area-02 {
  /*display: flex;*/
  /*align-items: center;*/
  /*flex-direction: column;*/
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
</style>
